<template>
	<view class="order-menu">
		<!-- 返回按钮 -->
		<u-back-top :scroll-top="scrollTop" top="10" :duration="240" :iconStyle="iconStyle" :customStyle="custom">
		</u-back-top>
		<!-- 弹窗 -->
		<view class="dialog">
		</view>
		<!-- 购买列表 -->
		<view class="action-content">
			<template v-if="itemList.length != 0">
				<block v-for="(res, index) in itemList" :key="index">
					<view class="action-item">
						<view class="item-style">
							<view class="item-img-style">
								<image class="item-img" :src="res.img"></image>
							</view>
							<view class="item-info">
								<view class="item-name">{{ res.title }}</view>
								<view class="message">有效期：{{ res.valid }}天</view>
								<view class="item-status">
									<view class="price">抢购分 {{res.price}}</view>
								</view>
								<view class="buy-button">
									<view class="button" @click="buy(index, res.id)">购买</view>
								</view>
							</view>
							<!-- <view class="item-info-two">
								<block v-if="res.status === 1 && res.number != 0">
									<view class="status">{{ res.statusName }}</view>
								</block>
								<block v-else>
									<view class="status-one">{{ res.statusName }}</view>
								</block>
							</view> -->
						</view>
					</view>
				</block>
			</template>
			<template v-if="hasData">
				<view class="action-sell-out">
					<image class="sell-out" src="/static/images/common/sellout.png" mode="widthFix"></image>
					<view class="sell-out-text">商品全部已售空</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		SetMeal_list,
		Buy_YySetMeal
	} from '@/common/api.js';
	export default {
		components: {
		},
		data() {
			return {
				/* 返回顶部按钮 */
				scrollTop: 0, // 返回顶部滚动值
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: '600',
					color: '#FFFFFF'
				}, // 滚动内层样式
				custom: {
					background: '#CB8F58'
				}, // 滚动外层样式

				/* 弹窗 */
				showTips: false, // 弹窗状态
				maskTips: '123', // 提示信息
				
				/* 弹窗 - 注册 成为矿池主 */
				showDialog_two: false, // 注册成为矿池主
				isErrorTwo: false, // 是否校验成功

				/* 数据列表 */
				pages: 1, // 订单页数
				total_page: '', // 订单总页数
				amount: 5, // 订单条数
				total_amount: '', // 订单总数
				activityID: '', // 活动场次编号
				date: '', // 活动时间
				itemList: [], // 商品信息
				goods_name: '', // 搜索商品名称
				goodsID: '', // 商品ID

				/* 是否有数据 */
				hasData: false, // 判断当前是否有数据
			};
		},
		onLoad() {
			/* 活动详情列表 */
			this.getGoodsList(); // 获取商品信息
		},
		onShow() {

		},
		/* 返回顶部 */
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			
			/* 输入邀请码 - 注册账号 / 成为矿场主 / 温馨提示 - 关闭弹窗 */
			confirm(option) {
				const that = this;
				if (option.dialog === 0) { // 注册账号
					let inviteCode = option.code;
					const params = {
						appToken: that.appToken,
						inviteCode: inviteCode
					};
					userInc(params).then((res) => {
						if (res.code === 0) {
							that.showDialog_one = false;
							Fn.Toast(res.msg, 3, 1000);
							that.token = res.data._token;
							uni.setStorageSync('token', that.token);
							that.getAll(); // 获取所有数据
						} else {
							that.isErrorOne = true;
						};
					}).catch((e) => {
						console.log(e);
					});
				} else if (option.dialog === 1) { // 注册成为矿场主
					let inviteCode = option.code;
					const params = {
						master_code: inviteCode
					};
					checkMaster(params).then((res) => {
						if (res.code === 0) {
							that.masterCode = option.code;
							that.pledge.type = 'vip';
							that.showDialog_two = false;
							that.showPopupBuy = true;
							that.goStart(1);
						} else {
							that.isErrorTwo = true;
						};
					}).catch((e) => {
						console.log(e);
					});
					// userInc(params).then((res) => {
					// 	if (res.code === 0) {
					// 		that.showDialog_one = false;
					// 		Fn.Toast(res.msg, 3, 1000);
					// 		that.token = res.data._token;
					// 		uni.setStorageSync('token', that.token);
					// 		that.getAll();
					// 	} else {
					// 		that.isErrorTwo = true;
					// 	};
					// }).catch((e) => {
					// 	console.log(e);
					// });
				} else if (option.dialog === 2) { // 温馨提示弹窗 - 支付结果
					that.relieveStatus = false;
					// 0 - 确定 | 1 - 留在此页 | 2 - 返回首页
					/* if (option.type === 0) {
						// const params = {
						// 	pledge_id: that.relieveID, // 订单id号
						// };
						// that.pledgeFireOrder(params);
						// that.showDialog_three = false;
					} else */
					if (option.type === 1) {
						that.menu = 'home';
						that.showDialog_three = false;
					} else if (option.type === 2) {
						if (that.menu === 'profit') {
							that.$refs.profit.getData();
						} else if (that.menu === 'order') {
							that.$refs.order.getData();
						} else if (that.menu === 'hashrate') {
							that.$refs.hashrate.getData();
						}
						that.showDialog_three = false;
					}
				} else if (option.dialog === 3) { // 温馨提示弹窗 - 按钮
					if (option.type === 0) {
						const params = {
							pledge_id: that.relieveID, // 订单id号
						};
						that.pledgeFireOrder(params);
						that.showDialog_four = false;
					} else if (option.type === 1) {
						that.showDialog_four = false;
						if (that.menu === 'profit') {
							that.$refs.profit.getData();
						} else if (that.menu === 'order') {
							that.$refs.order.getData();
						} else if (that.menu === 'hashrate') {
							that.$refs.hashrate.getData();
						}
					} else if (option.type === 2) {
						that.menu = 'home';
						that.showDialog_four = false;
					}
				};
			},
			
			/* 取消按钮 */
			cancel(option) {
				const that = this;
				if (option.type === 0) {
					that.showDialog_one = option.showDialog_one;
					that.isErrorOne = false;
				} else if (option.type === 1) {
					that.showDialog_two = option.showDialog_two;
					that.isErrorTwo = false;
				}
				// that.closeApp();
			},
			
			/* 检查是否输入错误 */
			checkCode(option) {
				const that = this;
				if (option.type === 0) {
					that.isErrorOne = option.isErrorOne;
				} else if (option.type === 1) {
					that.isErrorTwo = option.isErrorTwo;
				}
			},

			/* 获取商品列表 */
			getGoodsList() {
				const that = this;
				const params = {
					catId: 1,
				};
				SetMeal_list(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						// console.log(result);
						that.total_page = result.last_page;
						that.total_amount = result.total;
						that.itemList = result.data.map(item => {
							return {
								id: item.id,
								number: item.goodsNum,
								title: item.name,
								img: '/static/images/auction/menu.png',
								price: Fn.checkDigit({
									number: item.money,
									len: 4,
									max: 100000000,
									min: -1
								}) /* item.goodsPrice */ ,
								valid: item.valid_period,
								description: item.description
							};
						});
						if (that.itemList.length === 0) {
							that.hasData = true;
						} else {
							that.hasData = false;
						};
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 购买套餐 */
			buy(index, goodsId) {
				const that = this;
				that.goodsID = goodsId;
				that.showTips = !that.showTips;
				that.maskTips = "是否支付抢购分" + that.itemList[index].price + "购买套餐？";
			},

			/* 确定下单 */
			confirmOrder() {
				const that = this;
				const params = {
					tcid: that.goodsID
				};
				Buy_YySetMeal(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						// console.log(result);
						Fn.Toast(res.msg);
						that.showTips = false;
					} else {
						Fn.Toast(res.msg, 3, 1000);
					};
				});
			},

			/* 输入邀请码 - 注册账号 / 温馨提示 - 关闭弹窗 */
			confirm() {
				const that = this;
				// 节流操作防止重复请求
				uni.$u.throttle(that.confirmOrder, 1000);
			},

			/* 取消按钮 */
			cancelOne(option) {
				const that = this;
				that.showTips = option.showDialog_one;
			},

			/* 跳转至商品详情页面 */
			navigateGoods(id) {
				uni.navigateTo({
					url: '/pages/auction/orderMenu/goodsDetail/goodsDetail?id=' + id,
				});
			},
		}
	}
</script>

<style lang="scss">
	.order-menu {
		padding: 15px 18px 30px 18px;
		font-family: PingFang_Medium;

		.action-content {
			// margin-top: 28rpx;
			// display: flex;
			// align-items: center;
			// flex-wrap: wrap;
			// justify-content: space-between;

			.action-item {
				width: calc(50% - 14rpx);
				display: inline-block;
				border: 1px solid #E9E9E9;
				// margin: 15rpx;
				// padding: 18rpx;
				box-sizing: border-box;
				// cursor: pointer;

				&:nth-of-type(even) {
					margin-left: 14rpx;
				}

				&:nth-of-type(odd) {
					margin-right: 14rpx;
				}

				&:nth-of-type(n+3) {
					margin-top: 30rpx;
				}

				.item-style {

					.item-img-style {
						width: 100%;
						// width: 260rpx;
						height: 290rpx;

						.item-img {
							width: 100%;
							height: 100%;
							box-sizing: border-box;
						}
					}

					.item-info {
						// margin-top: 26rpx;
						padding: 18rpx;

						.item-name {
							font-size: 28rpx;
						}

						.item-status {
							margin-top: 10rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.price {
								font-size: 36rpx;
								font-family: PingFang_Bold;
								// font-weight: 600;
							}							
						}
						
						.buy-button {
							margin-top: 10rpx;
							text-align: center;
						
							.button {
								background-color: #E62A21;
								padding: 10rpx 22rpx;
								border-radius: 10rpx;
								color: #FFFFFF;
								font-size: 28rpx;
							}
						}
						
						.message {
							margin-top: 6rpx;
							color: #E62A21;
							font-size: 26rpx;
							font-family: PingFang_Bold;
						}
					}

					// .item-info-two {
					// 	padding: 0 18rpx 18rpx 18rpx;
					// 	// text-align: right;

					// 	.status {
					// 		background-color: #AD4440;
					// 		padding: 8rpx 18rpx;
					// 		color: #FFFFFF;
					// 		font-size: 26rpx;
					// 		font-weight: 600;
					// 		width: 8vw;
					// 		text-align: center;
					// 	}

					// 	.status-one {
					// 		background-color: #beb2b2;
					// 		padding: 8rpx 18rpx;
					// 		// color: #FFFFFF;
					// 		font-size: 22rpx;
					// 		font-weight: 600;
					// 	}
					// }
				}
			}

			.action-sell-out {
				margin-top: 100rpx;
				text-align: center;

				.sell-out {
					width: 65vw;
					height: 65vw;
				}

				.sell-out-text {
					margin-top: 40rpx;
					color: #aaaaaa;
					font-size: 34rpx;
					font-weight: 600;
				}
			}
		}
	}
</style>
